﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>w3cfuns网站jquery导航条</title>
    <style>
        body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
        body{font-size:12px; font-family: verdana,Microsoft YaHei,Tahoma,sans-serif;}
        img{border:none;}
        li{list-style:none;}
        input,select,textarea{outline:none;}
        textarea{resize:none;}
        a{text-decoration:none;}

        /*清浮动*/
        .clearfix:after{content:"";display:block;clear:both;}
        .clearfix{zoom:1;}

        .fl{ float:left;}
        .fr{ float:right;}

        /*nav*/
        .bg{ background:#333; width:100%;  height:20px; height: 55px;position: fixed; _position: absolute;}
        .nav{ font-size:14px; width: 1220px;   margin:0 auto; }
        .nav h2{ overflow: hidden;position: relative; margin-right: 20px;padding: 0 20px 0 0;}
        .nav ul.w3cnav>li{ display:inline; overflow: hidden; position: relative;}
        .nav ul.w3cnav>li>a{padding: 0 15px; display:inline-block; color:#DDD; line-height:55px;  height: 55px;   text-align:center;}
        .nav ul.w3cnav li.nvmore{ cursor:pointer; padding: 0 25px 0 15px; display:inline-block; color:#DDD; line-height:55px;  height: 55px; text-align:center; background:url(http://www.w3cfuns.com/resource/images/extend/hdbg.png) no-repeat 49px 27px; position:relative; overflow:visible;}
        .nav ul.w3cnav li.nvmore.hover{color:#333; border-left:1px solid #333; border-right:1px solid #333; background:#fff url(http://www.w3cfuns.com/resource/images/extend/hdbg.png) no-repeat -35px 27px;}

        .nav li.nvmore ul.sl{ position: absolute;top: 46px;left: -1px;width: 200px;border: 1px solid #333;background: #fff;z-index: 2;border-top-width: 0; display:none;}
        .nav li.nvmore ul.sl li{ height:30px; width:50px; line-height:30px; text-align:center; font-size:12px;}
        .nav li.nvmore ul.sl li a{ color:#333;}
        .nav li.nvmore ul.sl li a:hover{ color:#05A;text-decoration: underline;}

        .nav ul.w3cnav i{ background:url(http://www.w3cfuns.com/resource/images/extend/hdbg.png) no-repeat 0 -42px; position:absolute; left:50%; bottom:-9px;margin-left:-7px;width: 12px;height: 6px; font-style: normal; font-size:0; }
        .nav ul.w3cnav .active i{bottom:0px;}

        .nav ul.cl li{ font-size:12px;}
        .nav ul.cl li a{ display:inline-block; color:#DDD; line-height:55px;  height: 55px; padding: 0 8px; }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function(){
            let $nvmore=$('.nvmore');
            let $w3cnav=$('.w3cnav');
            let $nav_li=$('.w3cnav>li').not('.nvmore');
            let $nav_a=$nav_li.find('a');

            let index=$nav_li.index('.active');
            let timer=null;
            function sl_show(){
                clearInterval(timer);
                $nvmore.addClass('hover')
                    .find('ul').css({'display':'block'});
            }
            function sl_hide(){
                timer=setInterval(function(){
                    $nvmore.removeClass('hover')
                        .find('ul').css({'display':'none'});
                },1000);
            }

            $nvmore.mouseover(function(){
                sl_show();
            })
            $nvmore.mouseout(function(){
                sl_hide();
            })

            $nav_a.mouseover(function(){
                $(this).parent().siblings('li').find('i')
                    .stop(true,true)
                    .animate({bottom:'-9px'},'fast');
                $(this).next('i').animate({bottom:'0px'});
            }).mouseout(function(){
                $(this).parent().siblings('li').find('i').stop(true,true);
                $nav_li.not('.active').find('i').animate({bottom:'-9px'},'fast');
            }).click(function(){
                index=$nav_li.index($(this).parent());

                $nav_li.eq(index).addClass('active')
                    .siblings().removeClass('active');
            });

            $w3cnav.mouseleave(function(){
                $(this).find('i').stop(true,true);
                $nav_li.not('.active').find('i').animate({bottom:'-9px'},'fast');
                let v_bottom=parseInt($nav_li.eq(index).find('i').css('bottom'));
                if(v_bottom!=0){
                    $nav_li.eq(index).find('i').animate({bottom:'0px'},'fast');
                }
            })
        });
        
    </script>
</head>
<body>
<div class="bg">
    <div class="nav clearfix">
        <h2 class="fl"><a href="#"><img src="images/w3cfuns_logo_hd.png" /></a></h2>
        <ul class="fl w3cnav">
            <li class="fl active"><a href="#">首页</a><i></i></li>
            <li class="fl"><a href="#">前端</a><i></i></li>
            <li class="fl"><a href="#">技术</a><i></i></li>
            <li class="fl"><a href="#">笔记</a><i></i></li>
            <li class="fl"><a href="#">问问</a><i></i></li>
            <li class="fl"><a href="#">教程</a><i></i></li>
            <li class="fl"><a href="#">资源</a><i></i></li>
            <li class="fl"><a href="#">招聘</a><i></i></li>
            <li class="fl"><a href="#">家园</a><i></i></li>
            <li class="fl nvmore">更多<em></em>
                <ul class="sl">
                    <li class="fl"><a href="#">帮派</a></li>
                    <li class="fl"><a href="#">发现</a></li>
                    <li class="fl"><a href="#">阅览</a></li>
                    <li class="fl"><a href="#">微笔记</a></li>
                    <li class="fl"><a href="#">视频</a></li>
                    <li class="fl"><a href="#">广播</a></li>
                    <li class="fl"><a href="#">聊聊</a></li>
                    <li class="fl"><a href="#">试题</a></li>
                    <li class="fl"><a href="#">面试</a></li>
                    <li class="fl"><a href="#">电子书</a></li>
                    <li class="fl"><a href="#">神器</a></li>
                </ul>
            </li>
        </ul>
        <ul class="fr cl">
            <li class="fl"><a href="#">登录</a></li>
            <li class="fl"><a href="#">注册</a></li>
            <li class="fl"><a href="#">企业入驻</a></li>
        </ul>

    </div>
</div>
<br><br><br><br><br><br>
<div style="text-align:center;">
    <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p><br>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>